<!-- 三维地图 -->
<template>
  <div class="wrap-container">
    <div class="wrap-cover"></div>
    <div class="wrap-gis-map">
      <GisMap ref="schoolLab" :debugger="false" :data="detail" :config="config" :styles="style" :storeyChooseCb="storeyChoose" :storeyUnChooseCb="storeyUnChoose" :popupClickCb="popupClickCb" />
    </div>
    <MapHeader />
    <div class="wrap-container-info">
      <div>
        <LaboratoryInfo :dataList="laboratoryData" :DataCount="laboratoryTotal" />
        <GasCylinderInfo :dataList="gasCylinderData" />
      </div>
      <div>
        <Barcharts />
        <LineBarCharts />
      </div>
    </div>
    <SearchTool @onSchoolCheck="onSchoolCheck" @onSearch="onSearch" @onClose="onClose" />
    <ViewFloorModal ref="viewFloorModal" :modalData="floorModelData" v-show="viewFloorModalVisible" @checkMore="checkMore" />
    <FloorModal :modal="floorInfoShow" @modalinput="floorInfoShow = false" :modalInfo="modalInfo" />
    <div @click="toggleRotate" :class="{ 'model-rotate-btn': isModelRotate, 'model-rotate-btn-checked': !isModelRotate }"></div>
    <!-- <button @click="toggleArea" style="position: absolute; right: 0%; top: 0%; z-index: 9999;">切换校区</button>
    <button @click="toggleRotate" style="position: absolute; right: 0%; top: 50px; z-index: 9999;">切换自传</button> -->
  </div>
</template>

<script>
  import axiosModel from '@/api'
  import GisMap from '@/components/GisMap'
  import MapHeader from '@/components/MapHeader'
  import LaboratoryInfo from '@/components/LaboratoryInfo'
  import GasCylinderInfo from '@/components/GasCylinderInfo'
  import GisMapMixin from '@/mixins/GisMap'
  import Barcharts from '@/components/Barcharts'
  import LineBarCharts from '@/components/LineBarCharts'
  import SearchTool from '@/components/SearchTool'
  import FloorModal from '@/components/FloorModal'
  import ViewFloorModal from '@/components/ViewFloorModal'

  // import markerData from '@/assets/mockData/marker.json'
  export default {
    components: {
      GisMap,
      MapHeader,
      LaboratoryInfo,
      GasCylinderInfo,
      Barcharts,
      LineBarCharts,
      SearchTool,
      FloorModal,
      ViewFloorModal
    },
    data () {
      return {
        isModelRotate: false,
        viewFloorModalVisible: false,
        floorInfoShow: false,
        floorModelData: {},
        modalInfo: {},
        detail: [],
        interval: null,
        count: 0,
        floorModalShow: false,
        laboratoryData: [], // 实验室数据
        laboratoryTotal: 0,
        currentLocation: [121.41935804033824, 31.145222708124425],
        gasCylinderData: [
          {
            name: '购买总数',
            count: '13'
          },
          {
            name: '存放数量',
            count: '43'
          },
          {
            name: '管制数量',
            count: '6'
          },
          {
            name: '超一年数量',
            count: '222'
          }
        ] // 实验楼钢瓶数量统计
      }
    },
    mixins: [GisMapMixin],
    computed: {},
    created () {},
    mounted () {
      this.getBuildingData()
      this.getLabRoomInfo()
      this.getDashboardGas()
      setTimeout(() => {
        this.getStaticticsData()
        this.interval = setInterval(() => {
          this.getStaticticsData()
        }, 60000)
      }, 5000)
    },
    methods: {
      async getBuildingData () {
        const { data } = await axiosModel.buildingQueryController.postQueryBuilding({
          pageNo: 1,
          pageSize: 274
        })
        console.log(data)
      },
      async getStaticticsData () {
        const { data } = await axiosModel.buildingQueryController.getBuildingStatistics()
        let _data = data.rows.dataList.buildingDataList
        this.detail = _data
        // this.detail = _data.slice(0, 16)

        // 假数据
        // let data = [].concat(markerData.data)
        // let random = Math.floor(Math.random() * 100)
        // console.log(random)
        // data[0].labNum = random
        // this.detail = data
      },
      async getLabRoomInfo () {
        const { data } = await axiosModel.buildingQueryController.getLabRoomInfo()
        this.laboratoryTotal = data.labRoomNum
        this.laboratoryData = data.classLabList
      },
      async getDashboardGas () {
        const { data } = await axiosModel.buildingQueryController.getDashboardGas()
        this.gasCylinderData[0].count = data.rows.dataList.totalStatistics ? data.rows.dataList.totalStatistics.gms : 0
        this.gasCylinderData[1].count = data.rows.dataList.totalStatistics ? data.rows.dataList.totalStatistics.cfs : 0
        this.gasCylinderData[2].count = data.rows.dataList.totalStatistics ? data.rows.dataList.totalStatistics.jgs : 0
        this.gasCylinderData[3].count = data.rows.dataList.totalStatistics ? data.rows.dataList.totalStatistics.cyns : 0
      },
      onSchoolCheck (item) {
        let lngLatArr = []
        let height = ''
        switch (item.item_id) {
          case '0169a40970584028b24069a408c00002':
            lngLatArr = [121.41935804033824, 31.145222708124425]
            height = 950
            break
          case '0169a4091f6c4028b24069a408c00001':
            lngLatArr = [121.50021768930503, 30.834476993862072]
            height = 850
            break
          case '0169a409c1f44028b24069a408c00003':
            lngLatArr = [121.31653637066478, 30.742218498634806]
            height = 550
            break
          default:
            lngLatArr = item.location ? item.location.split(',') : []
            height = 650
            break
        }
        if (this.currentLocation.toString() === lngLatArr.toString()) {
          return
        } else {
          this.currentLocation = lngLatArr
          lngLatArr.length &&
            this.$refs['schoolLab'].flyTo({
              lngLat: lngLatArr,
              height: height,
              pitch: 75,
              maxHeight: 40000,
              duration: 3
            })
        }
      },
      storeyChoose (data) {
        this.viewFloorModalVisible = true
        this.floorModelData = Object.assign({}, data)
        this.$refs['viewFloorModal'].$el.style.left = `${data.screenPos.x + 20}px`
        this.$refs['viewFloorModal'].$el.style.top = `${data.screenPos.y}px`
      },
      storeyUnChoose () {
        this.viewFloorModalVisible = false
      },
      async popupClickCb (buildingData) {
        const { data } = await axiosModel.buildingQueryController.getFloorBriefInfo({
          buildingId: buildingData.buildingId
        })
        let _data = data.rows.dataList.floors
        this.$refs['schoolLab'].setFloorsData(_data)
      },
      toggleRotate () {
        this.isModelRotate = !this.isModelRotate
        this.$refs['schoolLab'].toggleRotate()
      },
      beforeDestroy () {
        clearInterval(this.interval)
        this.interval = null
        this.$refs['schoolLab'].destroy()
      },
      checkMore (param) {
        this.modalInfo = Object.assign({}, param)
        this.floorInfoShow = true
      },
      onSearch (param) {
        let arr = param.map(item => {
          return item.ID
        })
        this.$refs['schoolLab'].filter(arr)
      },
      onClose () {
        this.$refs['schoolLab'].filterReset()
      }
    }
  }
</script>
<style lang="less" scoped>
  .wrap-container {
    background: linear-gradient(90deg, #003376 0%, rgba(0, 51, 118, 0.2) 13%, rgba(0, 0, 0, 0) 51%, rgba(0, 51, 118, 0.2) 87%, rgba(0, 51, 118, 0.6) 100%);
    width: 100%;
    height: 100%;
    padding: 34px 60px;
    box-sizing: border-box;
    .wrap-gis-map {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
    .wrap-container-info {
      height: 90%;
      width: 100%;
      padding-top: 20px;
      display: flex;
      justify-content: space-between;
      > div {
        width: 260px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
    .wrap-cover {
      position: absolute;
      pointer-events: none;
      left: 0;
      top: 0;
      z-index: 3;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, #003376 0%, rgba(0, 51, 118, 0.2) 18%, rgba(0, 0, 0, 0) 51%, rgba(0, 51, 118, 0.2) 75%, rgba(0, 51, 118, 0.75) 100%);
    }
  }
  .model-rotate-btn {
    cursor: pointer;
    width: 57px;
    height: 57px;
    position: absolute;
    margin-left: -28px;
    bottom: 20px;
    left: 50%;
    background: url('~@/assets/images/viewIcon/icon_sy_xuanzhuan_pre.png');
  }
  .model-rotate-btn-checked {
    cursor: pointer;
    width: 57px;
    height: 57px;
    margin-left: -28px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    background: url('~@/assets/images/viewIcon/icon_sy_xuanzhuan_nor.png');
  }
</style>
